<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/2/1 0001
  Time: 14:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<%@include file="/WEB-INF/include-head.jsp" %>
<link rel="stylesheet" href="ztree/zTreeStyle.css"/>

<body>

<%@include file="/WEB-INF/include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="/WEB-INF/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal">
                        <i class="glyphicon glyphicon-question-sign">
                        </i>
                    </div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree">
                        <%-- 显示树形结构依附于上面的ul --%>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <%@include file="/WEB-INF/modal-menu-add.jsp" %>
    <%@include file="/WEB-INF/modal-menu-edit.jsp" %>
    <%@include file="/WEB-INF/modal-menu-confirm.jsp" %>
</div>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">

    $(function () {

        generateTree()

        $("#treeDemo").on("click", ".addBtn", function () {

            // 将当前节点的id作为pid保存到全局变量
            window.pid = this.id;

            $("#menuAddModal").modal("show");

            return false;
        });

        $("#menuSaveBtn").click(function () {
            let name = $.trim($("#menuAddModal [name=name]").val());
            let url = $.trim($("#menuAddModal [name=url]").val());
            let icon = $.trim($("#menuAddModal [name=icon]:checked").val());

            $.ajax({
                "url": "menu/save.json",
                "type": "post",
                "data": {
                    "pid": window.pid,
                    "name": name,
                    "url": url,
                    "icon": icon
                },
                "dataType": "json",
                "success": function (response) {
                    let result = response.result;

                    if (result === "SUCCESS") {
                        layer.msg("操作成功")
                        generateTree();
                    }
                    if (result === "FAILED") {
                        layer.msg("操作失败了" + response.message)
                    }
                },
                "error": function (response) {
                    layer.msg(response.status + " " + response.status.text)
                }
            });
            $("#menuAddModal").modal("hide");

            $("#menuResetBtn").click();

        });

        $("#treeDemo").on("click", ".editBtn", function () {

            // 将当前节点的id作为pid保存到全局变量
            window.id = this.id;

            $("#menuEditModal").modal("show");

            // 根据id查询节点
            let zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            let key = "id";
            let value = window.id;
            let currentNode = zTreeObj.getNodeByParam(key, value);

            $("#menuEditModal [name=name]").val(currentNode.name);
            $("#menuEditModal [name=url]").val(currentNode.url);
            $("#menuEditModal [name=icon]").val([currentNode.icon]);
            // 回显

            return false;
        });

        $("#menuEditBtn").click(function () {
            // 收集表单数据
            let name = $("#menuEditModal [name=name]").val();
            let url = $("#menuEditModal [name=url]").val();
            let icon = $("#menuEditModal [name=icon]:checked").val();

            // ajax
            $.ajax({
                "url": "menu/update.json",
                "type": "post",
                "data": {
                    "id": window.id,
                    "name": name,
                    "url": url,
                    "icon": icon
                },
                "dataType": "json",
                "success": function (response) {
                    let result = response.result;

                    if (result === "SUCCESS") {
                        layer.msg("操作成功")
                        generateTree();
                    }
                    if (result === "FAILED") {
                        layer.msg("操作失败了" + response.message)
                    }
                },
                "error": function (response) {
                    layer.msg(response.status + " " + response.status.text)
                }
            });
            $("#menuEditModal").modal("hide");

        });

        $("#treeDemo").on("click", ".removeBtn", function () {

            // 将当前节点的id作为pid保存到全局变量
            window.pid = this.id;

            $("#menuConfirmModal").modal("show");

            // 根据id查询节点
            let zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            let key = "id";
            let value = window.id;
            let currentNode = zTreeObj.getNodeByParam(key, value);

            $("#removeNodeSpan").text(currentNode.name);
            return false;
        });

        $("#menuRemoveBtn").click(function () {

            // ajax
            $.ajax({
                "url": "menu/remove.json",
                "type": "post",
                "data": {
                    "id": window.id
                },
                "dataType": "json",
                "success": function (response) {
                    let result = response.result;

                    if (result === "SUCCESS") {
                        layer.msg("操作成功")
                        generateTree();
                    }
                    if (result === "FAILED") {
                        layer.msg("操作失败了" + response.message)
                    }
                },
                "error": function (response) {
                    layer.msg(response.status + " " + response.status.text)
                }
            });
            $("#menuConfirmModal").modal("hide");

        });

    });

</script>

</body>
</html>
